import "./index.less";
import { useLocation, useNavigate } from "react-router-dom";
import { PageHeader } from "@/components";
import { useEffect, useMemo, useState } from "react";
import { Button, CheckList, Input, Popup } from "antd-mobile";
import { CheckCircleFill } from "antd-mobile-icons";

const exData = [
  { id: "1", name: "张三" },
  { id: "2", name: "李四" },
  { id: "3", name: "王五" },
];

export default function ServiceCharacter({ value, setValue }: any) {
  const navigate = useNavigate();
  const location = useLocation();
  const [checkList, setCheckList] = useState([...exData]);
  const [selList, setSelList] = useState<string[]>();
  const [selNameList, setSelNameList] = useState<string[]>();

  useEffect(() => {
    setSelList(location?.state?.ItemInfo?.target);
  }, []);
  useEffect(() => {
    let nameList: string[] = [];
    checkList?.map((i: any, index: number) => {
      if (selList?.includes(i.id)) nameList.push(i.name);
    });
    setSelNameList(nameList);
  }, [selList]);

  return (
    <div className="sesc_contarnier">
      <div className="header-bg"></div>
      <PageHeader
        title="服务对象"
        goback={() =>
          navigate(`/publicService/entry/report`, {
            state: {
              ItemInfo: {
                ...location?.state?.ItemInfo,
                target: location?.state?.ItemInfo?.target,
                targetName: location?.state?.ItemInfo?.targetName,
              },
            },
          })
        }
      />

      <div className="sesc_content">
        <div className="sesc_content_checklist">
          <CheckList
            value={selList}
            multiple
            activeIcon={<CheckCircleFill />}
            onChange={(v: string[]) => setSelList(v)}
          >
            {checkList?.map((item: any, index: number) => {
              return (
                <CheckList.Item key={item.id} value={item.id}>
                  {item.name}
                </CheckList.Item>
              );
            })}
          </CheckList>
        </div>

        <div
          className="submitBtn"
          onClick={() =>
            navigate(`/publicService/entry/report`, {
              state: {
                ItemInfo: {
                  ...location?.state?.ItemInfo,
                  target: selList,
                  targetName: selNameList,
                },
              },
            })
          }
        >
          确定
        </div>
      </div>
    </div>
  );
}
